<template>
  <el-dialog :visible.sync="visible" 
  :title="title" 
  :append-to-body="true"
  :lock-scroll="true"
  :close-on-click-modal="false" 
  :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule"  label-width="80px" label-position="top" ref="dataForm" >
      <el-form-item prop="isMember" label="组内用户">
        <el-checkbox-group v-model="dataForm.userList" >
          <el-checkbox class="checkItem" v-for="member in checkedMemberList" :key="member.userId" :label="member.userId">{{ member.username + ' ' +member.name }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="roleAddUser" label="组外用户">
        <el-checkbox-group v-model="dataForm.userList">
          <el-checkbox class="checkItem" v-for="member in addMemberList" :key="member.userId" :label="member.userId">{{ member.username + ' ' + member.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确认</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import servicesApi from '@/services/servicesApi'
export default {
  data() {
    return {
      visible: false,
      title: '成员维护',
      MemberList: [], //所有用户
      checkedMemberList: [ ], //组内用户
      addMemberList: [ //组外用户
        // { userId: 1, username: 'a' },
      ],
      dataForm: {
        // userId:0 ,
        roleId: 1,
        userList: [], 
      }
    }
  },
  computed: {
    dataRule() {
      return {
        name: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ]
      }
    }
  },
  activated() {
    // this.getUsersList()
  },
  methods: {
    init(row) {
      this.visible = true
      this.dataForm.roleId = row.id || 0
      this.getUsersList().then(() => {
        this.getUsersSelected()
      })
      // console.log(this.MemberList)
      // console.log(this.checkedMemberList)
      this.title = row.name + ' 成员维护'
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        // this.getUsersList()
        // Promise.all([
        //   this.getUsersList()
        // ]).then(() => {
        //   this.getUsersSelected()
          // this.getUsersList()
          // if (this.dataForm.id) {//修改
          //   this.getInfo()
          // }
        // })
      })

      // this.visible = true
      // this.dataForm.roleId=roleId
      // this.$nextTick(() => {
      //   this.$refs['dataForm'].resetFields()
      //   this.$refs.menuListTree.setCheckedKeys([])
      //   this.$refs.deptListTree.setCheckedKeys([])
      //   Promise.all([
      //     this.getUsersList(),
      //     this.getDeptList()
      //   ]).then(() => {
      //     if (this.dataForm.id) {
      //       this.getInfo()
      //     }
      //   })
      // })
    },
    // 获取用户列表
    async getUsersList() {
      await servicesApi.getAllUsers().then(res => {
        let code = res.data.code
        let data = res.data.data
        if (code == 200) {
          // for( item in code){
          //   // console.log(item)
          //   let i ={ userId: item.userId,username:item.username}
          //   // console.log(i)
          //   this.addMemberList.push(i)
          // }
          this.MemberList = data
          // console.log(this.MemberList)
          
        } else {
          return this.$message.error(res.data.msg)
        }
        
      })

      // return this.$http.get('/sys/menu/select').then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.menuList = res.data
      // }).catch(() => {})
    },
    getUsersSelected() {
      servicesApi.getUsersSelected(this.dataForm.roleId).then(res => {
        let code = res.data.code
        let data = res.data.data
        if (code == 200) {
          this.dataForm.userList = data
          // console.log(this.dataForm.userList)
          this.checkedMemberList = this.MemberList.filter(item => { 
            // // console.log(item.userId)
            if (data.includes(item.userId)) {  return true  }
            return false
          })
          // console.log(this.checkedMemberList)
          this.addMemberList = this.MemberList.filter(item => {
            // // console.log(item.userId)
            if (data.includes(item.userId)) { return false }
            return true
          })
          // console.log(this.addMemberList)
          
          
        } else {
          return this.$message.error(res.data.msg)
        }
      })
    },
    // 获取信息
    getInfo() {

      // servicesApi.getRoleById(this.dataForm.roleId).then(res => {
      //   let code = res.data.code
      //   let data = res.data.data
      //   if (code !== 200) {
      //     return this.$message.error(res.msg)
      //   }
      //   this.dataForm = data
      //   // this.dataForm.menuIdList.forEach(item => this.$refs.menuListTree.setChecked(item, true))
      // })

    },
    // 表单提交
    dataFormSubmitHandle: debounce(function() {
      servicesApi.addUserRole(this.dataForm).then(res => {
        let code = res.data.code
        if (code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
<style scoped>
.checkItem{
  /* background-color: aqua; */
  width: 30%;
  text-align: left;
  margin: 0 5px;
}
</style>